<template>
  <div class="invite_container">
    <div>
      <van-nav-bar :fixed="true" title="Invite Friends" @click-left="onClickLeft">
        <template #left>
          <van-icon :name="arrow" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="container">
      <div class="prize">
        <img src="../../../assets/images/user/prize.png" alt="prize">
      </div>
      <div class="title">Refer and Earn</div>
      <div class="text">Share this link with your friends and get up to $10</div>
      <div class="link">https://saving.club/?code=5468196651</div>
      <div class="btn">Copy Link</div>
    </div>
  </div>
</template>

<script setup name='Invite'>
import { reactive, ref, onMounted, defineEmits, defineProps, defineExpose } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userStore } from '@/store'
import arrow from '@/assets/images/user/arrow.png'

// 初始化仓库
const store = userStore()
// 变量区
const router = useRouter()
const route = useRoute()
const state = ref('')



// 代码区

const onClickLeft = () => {
  history.back()
  store.SET_PATH_DATA('yes')
}

onMounted(() => {

})

// 将组件中的数据进行暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
.invite_container {
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: 20%; 
    padding-top: 20%;

    .prize {
      width: 472px;
      height: 404px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      font-size: 42px;
      color: #000;
      font-weight: 700;
      margin: 30px 0px;
    }

    .text {
      font-size: 20px;
      color: #AFC8FB;
      margin-bottom: 30px
    }

    .link {
      width: 80%;
      height: 80px;
      line-height: 80px;
      background: #F7F9FF;
      border-radius: 20px;
      border: 1px dashed #AFC8FB;
      font-size: 25px;
      color: #A4A4A4;
      padding: 0px 20px 0px 20px;
      margin-bottom: 30px;
    }

    .btn {
      width: 80%;
      height: 100px;
      line-height: 100px;
      background: #afc8fb;
      color: #fff;
      font-size: 32px;
      text-align: center;
      border-radius: 40px;
    }
  }
}
</style>